import React,{Component} from 'react';

class InlinePicker extends Component {
    constructor(props){
        super(props)
        this.state={
            activeValue:''
        }
    }

    itemClick(value,label,e2){
        e2.stopPropagation();
        this.setState({
            activeValue:value
        });
        this.props.onChange(value,label)
        
    }

    componentDidMount(){
        this.setState({
            activeValue:(typeof this.props.selected !== "undefined")?this.props.selected:this.props.groups[0].value
        },()=>{
            this.props.groups.map((item)=>{
                if (item.value===this.state.activeValue){
                    if (this.props.onChange)
                    {
                        this.props.onChange(item.value,item.label)
                    }
                }
            })
        })
       
    }

    render(){
        let items=this.props.groups.map((item)=>{
            return <a href="javascript:;" className={`${(item.value == this.state.activeValue)?'active':''}`} key={Math.random().toString(16).substring(2)} onClick={this.itemClick.bind(this,item.value,item.label)} >{item.label}</a>
        })

        
        return (
            <div className={`com-inlinepicker ${(this.props.className)?this.props.className:''}`} style={(this.props.style)?this.props.style:{}}>
                {(this.props.title)?<span style={{margin:"0px 10px",color:"#999"}}>{this.props.title}</span>:null}
                {items}
            </div>
        )
    }
}

export default InlinePicker